var mVal = new Vue({
    el:'#modalModify',
    data:{
        dept1:{"deptno":0,"dname":"","loc":""}
    }
});
var mVal2 = new Vue({
    el:'#modalModify2',
    data:{
        dept2:{"deptno":0,"dname":"","loc":""}
    }
});
var mytable = new Vue({
    el:'#mytab',
    data:{
        depts:[{"deptno":1,"dname":"zhangsan1","loc":"xian"},
            {"deptno":2,"dname":"zhangsan2","loc":"xian"},
            {"deptno":3,"dname":"zhangsan3","loc":"xian"},
            {"deptno":4,"dname":"zhangsan4","loc":"xian"},]
    },
    methods:{
        del:function(id){
            if (window.confirm("确定要删除嘛？")) {
                $.ajax({
                    url: 'dept/' + id,
                    type: 'delete',
                    dataType: 'json',
                    success: function (data) {
                        if (200 == data) {
                            for (var i = 0; i < mytable.depts.length; i++) {
                                if (mytable.depts[i].id == id) {
                                    mytable.depts.splice(i, 1);
                                    break;
                                }
                            }
                        }
                    }
                });
            }
        },
        upd:function (id) {
            var ndept = mytable.depts;
            for(var i=0;i<ndept.length;i++){
                if (ndept[i].id==id){
                    mVal.dept1.deptno = ndept[i].deptno;
                    mVal.dept1.dname = ndept[i].dname;
                    mVal.dept1.loc = ndept[i].loc;
                    break;
                }
            }
            $("#modalModify").modal("show");
        }
    }
});
function load(){
    $.ajax({
        url:"dept",
        // data:"application/json",
        type:"GET",
        dataType:"json",
        success:function(data){
            mytable.depts=data;
        }
    });
}
$(function () {
    $('#add').click(function () {
        $("#modalModify2").modal("show");
    });
    $('#addproduct').click(function () {
        $.ajax({
            url:'dept',
            type:'POST',
            contentType:'application/json;character:utf-8',
            dataType:'json',
            data:JSON.stringify(mVal2.dept2),
            success:function (data) {
                mytable.depts.push(data);
            }
        })
        $("#modalModify2").modal("hide");
    });
    $('#modify').click(function () {
        $.ajax({
            url:"dept",
            type:"PUT",
            data:JSON.stringify(mVal.dept1),
            contentType: 'application/json',
            dataType:'json',
            success:function (data) {
                console.log(data);
                for (var i=0;i<mytable.depts.length;i++){
                    if (mytable.depts[i].id==mVal.dept1.deptno){
                        mytable.depts[i].pname=mVal.dept1.dname;
                        mytable.depts[i].pic=mVal.dept1.loc;
                        break;
                    }
                }
            }
        })
    })
})